<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学籍管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入内容"
          v-model = "queryInfo.searchText"><el-button
            slot="append"
            icon="el-icon-search" @click="getStudentList"
          ></el-button> </el-input
      ></el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible = true">添加学生信息</el-button>
      </el-col>
    </el-row>
    <!-- 用户列表区域 -->
    <el-table :data="studentlist" border>
      <el-table-column prop="Sno" label="学号"> </el-table-column>
      <el-table-column prop="Sname" label="姓名"> </el-table-column>
      <el-table-column prop="Ssex" label="性别"> </el-table-column>
      <el-table-column prop="Sage" label="年龄"> </el-table-column>
      <el-table-column prop="Sdegree" label="年级"> </el-table-column>
      <el-table-column prop="Sdept" label="系别"> </el-table-column>
      <el-table-column prop="Syear" label="学制" width="50px"> </el-table-column>
      <el-table-column prop="Spolitics" label="政治面貌"> </el-table-column>
      <el-table-column prop="Snation" label="民族"> </el-table-column>
      <el-table-column prop="Sarea" label="生源地"> </el-table-column>
      <el-table-column prop="Srecords" label="奖惩记录"> </el-table-column>
      <el-table-column prop="Status" label="学籍状态"> </el-table-column>

      <el-table-column fixed="right" label="操作" width="150px">
        <template>
          <el-tooltip content="编辑" placement="bottom">
            <el-button
              type="primary"
              icon="el-icon-s-release"
              size="mini"
              @click="editDialogVisible = true"
            ></el-button>
          </el-tooltip>

          <el-tooltip content="删除" placement="bottom">
            <el-button
              type="danger"
              icon="el-icon-delete-solid"
              size="mini"
              @click="deleteDialogVisible = true"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

<!-- 添加考生信息 -->
    <el-dialog
      title="添加学生信息"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClose()"
    >
      <!--内容主体区域-->
      <el-form
        :model="addForm"
        :rules="addFormRulers"
        ref="addFormRef"
        label-width="110px"
      >
        <el-form-item label="学号" prop="Sno">
          <el-input v-model="addForm.Sno"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="Sname">
          <el-input v-model="addForm.Sname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="Ssex">
          <el-input v-model="addForm.Ssex"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="Sage">
          <el-input v-model="addForm.Sage"></el-input>
        </el-form-item>
        <el-form-item label="系别" prop="Sdept">
          <el-input v-model="addForm.Sdept"></el-input>
        </el-form-item>
        <el-form-item label="学年" prop="Syear" >
          <el-input v-model="addForm.Syear"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="Spolitics">
          <el-input v-model="addForm.Spolitics"></el-input>
        </el-form-item>
        <el-form-item label="民族" prop="Snation">
          <el-input v-model="addForm.Snation"></el-input>
        </el-form-item>
        <el-form-item label="生源地" prop="Sarea">
          <el-input v-model="addForm.Sarea"></el-input>
        </el-form-item>
        <el-form-item label="奖惩记录" prop="Srecords">
          <el-input v-model="addForm.Srecords"></el-input>
        </el-form-item>
        <el-form-item label="学籍状态" prop="Status">
          <el-input v-model="addForm.Status"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="Sdegree">
          <el-input v-model="addForm.Sdegree"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addstudent">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改考生信息 -->
    <el-dialog
      title="修改学生信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="updateDialogClose()"
    >
    <el-form
        :model="updateForm"
        :rules="updateFormRulers"
        ref="updateFormRef"
        label-width="110px"
      >
        <el-form-item label="学号" prop="Sno">
          <el-input v-model="updateForm.Sno"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="Sname">
          <el-input v-model="updateForm.Sname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="Ssex">
          <el-input v-model="updateForm.Ssex"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="Sage">
          <el-input v-model="updateForm.Sage"></el-input>
        </el-form-item>
        <el-form-item label="系别" prop="Sdept">
          <el-input v-model="updateForm.Sdept"></el-input>
        </el-form-item>
        <el-form-item label="学年" prop="Syear">
          <el-input v-model="updateForm.Syear"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="Spolitics">
          <el-input v-model="updateForm.Spolitics"></el-input>
        </el-form-item>
        <el-form-item label="民族" prop="Snation">
          <el-input v-model="updateForm.Snation"></el-input>
        </el-form-item>
        <el-form-item label="生源地" prop="Sarea">
          <el-input v-model="updateForm.Sarea"></el-input>
        </el-form-item>
        <el-form-item label="奖惩记录" prop="Srecords">
          <el-input v-model="updateForm.Srecords"></el-input>
        </el-form-item>
        <el-form-item label="学籍状态" prop="Status">
          <el-input v-model="updateForm.Status"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="Sdegree">
          <el-input v-model="updateForm.Sdegree"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showEditDialog"
          >确定修改</el-button
        >
      </span>
    </el-dialog>

     <!-- 删除考生信息 -->
    <el-dialog
      title="删除学生信息"
      :visible.sync="deleteDialogVisible"
      width="50%"
      @close="deleteDialogClose()"
    >
    <el-form
        :model="deleteForm"
        :rules="deleteFormRulers"
        ref="deleteFormRef"
        label-width="110px"
      >
        <el-form-item label="学号" prop="Sno">
          <el-input v-model="deleteForm.Sno"></el-input>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showDeleteDialog"
          >确定删除</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "student",
  data() {
    return {
      queryInfo: {
        searchText: "",
        pagenum: 1,
        pagesize: 2,
      },
      studentlist: [],
      total: 0,

    addDialogVisible: false,
      //添加学生的表单
      addForm: {
        Sno: "",
        Sname: "",
        Ssex: "",
        Sage: 18,
        Sdept: "",
        Syear: "",
        Spolitics: "",
        Snation: "",
        Sarea: "",
        Srecords: "",
        Status: "",
        Sdegree: 2
      },
      //添加表单的验证对象
      addFormRulers: {
        Sno: [{ required: true, message: "请输入学号", trigger: "blur" }],
        Sname: [{ required: true, message: "请输入名字", trigger: "blur" }],
        Ssex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        Sage: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        Sdept: [{ required: true, message: "请输入系别", trigger: "blur" }],
        Syear: [{ required: true, message: "请输入学制", trigger: "blur" }],
        Spolitics: [{ required: true, message: "请输入政治面貌", trigger: "blur" }],
        Snation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        Sarea: [{ required: true, message: "请输入生源地区", trigger: "blur" }],
        Srecords: [{ required: true, message: "请输入奖惩记录", trigger: "blur" }],
        Status: [{ required: true, message: "请输入学籍状态", trigger: "blur" }],
        Sdegree: [{ required: true, message: "请输入年级", trigger: "blur" }],
      },
       //控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      //修改考生的表单
      updateForm: {
        Sno: "",
        Sname: "",
        Ssex: "",
        Sage: 18,
        Sdept: "",
        Syear: "",
        Spolitics: "",
        Snation: "",
        Sarea: "",
        Srecords: "",
        Status: "",
        Sdegree: 2
      },
      //添加表单的验证对象
      updateFormRulers: {
        Sno: [{ required: true, message: "请输入学号", trigger: "blur" }],
        Sname: [{ required: true, message: "请输入名字", trigger: "blur" }],
        Ssex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        Sage: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        Sdept: [{ required: true, message: "请输入系别", trigger: "blur" }],
        Syear: [{ required: true, message: "请输入学制", trigger: "blur" }],
        Spolitics: [{ required: true, message: "请输入政治面貌", trigger: "blur" }],
        Snation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        Sarea: [{ required: true, message: "请输入生源地区", trigger: "blur" }],
        Srecords: [{ required: true, message: "请输入奖惩记录", trigger: "blur" }],
        Status: [{ required: true, message: "请输入学籍状态", trigger: "blur" }],
        Sdegree: [{ required: true, message: "请输入年级", trigger: "blur" }],
      },
      // 控制对话框显示与隐藏
      deleteDialogVisible: false,
      //删除考生的表单
      deleteForm: {
        Sno: "",
      },
      //添加表单的验证对象
      deleteFormRulers: {
        Sno: [{ required: true, message: "请输入学号", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getStudentList();
  },
  methods: {
    async getStudentList() {
      const { data: res } = await this.$http.get("/abc/students", {
        parmas: this.queryInfo,
      });
      if (res.code != 20000) {
        return this.$message.error("获取用户列表失败");
      } else {
        this.studentlist = res.data.value;
        this.total = res.data.total;
        console.log(res);
      }
    },
    // async search() {
    //   const { data: res } = await this.$http.get("/abc/students", {
    //     parmas: this.queryInfo,
    //   });
    //   if (res.code != 20000) {
    //     return this.$message.error("获取用户列表失败");
    //   } else if (this.studentlist.searchText == this.res.data.value.Sname){
    //     this.studentlist = res.data.value;
    //     this.total = res.data.total;
    //     console.log(res);
    //   }
    // },
     // 监听对话框是否关闭
   addDialogClose() {
      this.$refs.addFormRef.resetFields();
    },
    updateDialogClose(){
      this.$refs.updateFormRef.resetFields();
    },
    deleteDialogClose(){
      this.$refs.deleteFormRef.resetFields();
    },
     // 点击按钮进行校验
    addstudent() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post(
            "abc/students",
            this.addForm
          );
          console.log(res);
          if (res.code != 20000) {
            this.$message.error("添加学生信息失败");
          } else {
            this.$message.success("添加学生信息成功");
            this.addDialogVisible = false;
            // 刷新考生档案
            this.getStudentList();
          }
        } else {
          return;
        }
      });
    },
    //显示编辑用户的对话框
    showEditDialog() {
      this.$refs.updateFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post(
            "/abc/students/put",
            this.updateForm
          );
          console.log(res);
          if (res.code != 20000) {
            this.$message.error("修改考生失败");
          } else {
            this.$message.success("修改考生成功");
            this.editDialogVisible = false;
            // 刷新考生档案
            this.getStudentList();
          }
        } else {
          return;
        }
      });
    },
    // 显示删除用户的对话框
     showDeleteDialog() {
      this.$refs.deleteFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post(
            "/abc/students/delete",
            this.deleteForm
          );
          console.log(res);
          if (res.code != 20000) {
            this.$message.error("删除学生信息失败");
          } else {
            this.$message.success("删除学生信息成功");
            this.deleteDialogVisible = false;
            // 刷新考生档案
            this.getStudentList();
          }
        } else {
          return;
        }
      });
      },
  },
};
</script>

<style >
.el-breadcrumb {
  margin-bottom: 20px;
  font-size: 12px;
}
</style>